<template>
  <div class="base-content">
    <div class="basic-info">
      <el-form ref="filterForm" :model="filterForm" inline>
        <el-form-item label="样品编号" prop="sampleNum">
          <el-input
            v-model="filterForm.sampleNum"
            placeholder="样品编号"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="selectData('filter')"
            >查询</el-button
          >
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>
      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="addSampleStore"
          >样品留存</el-button
        >
        <el-button
          v-rights="'Export'"
          icon="el-icon-document-copy"
          type="primary"
          @click="exportData"
          >导出</el-button
        >
      </div>
      <el-main class="roller_main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="待办" name="first">
            <SampleStoreCommission
              v-if="activeName == 'first'"
              ref="SampleStoreCommission"
              :filter-form.sync="filterForm"
              :page-info.sync="pageInfo"
              :total.sync="total"
            />
          </el-tab-pane>
          <el-tab-pane label="已办" name="second">
            <SampleStoreFinished
              v-if="activeName == 'second'"
              ref="SampleStoreFinished"
              :filter-form.sync="filterForm"
              :page-info.sync="pageInfo"
              :total.sync="total"
            />
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pageInfo.pageIndex"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <!-- <SampleStoreDialog
      ref="SampleStoreDialog"
      :dialog-form-visible.sync="dialogFormVisible"
      :row-data.sync="rowData"
      @closeSampleReceivingDialog="closeSampleReceivingDialog"
    /> -->

    <SampleStoreEdit
      v-if="dialogFormVisible"
      ref="SampleStoreEdit"
      :dialog-form-visible.sync="dialogFormVisible"
      :row-data.sync="rowData"
      @closeSampleStoreDialog="closeSampleStoreDialog"
    />
  </div>
</template>
<script>
import SampleStoreCommission from "./SampleStoreCommission.vue";
import SampleStoreFinished from "./SampleStoreFinished.vue";
import SampleStoreEdit from "./SampleStoreEdit.vue";
// import SampleStoreDialog from "./SampleStoreDialog.vue";
export default {
  name: "SampleStoreList",
  components: {
    SampleStoreCommission,
    SampleStoreFinished,
    SampleStoreEdit,
    // SampleStoreDialog,
  },
  data() {
    return {
      activeName: "first",
      loadState: false,
      filterForm: {
        sampleManageStatusCode: 10,
        sampleNum: "",
        finishedState: "",
      },
      searchLoading: false,
      dialogFormVisible: false,
      rowData: [],
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  computed: {},
  created() {},
  methods: {
    closeSampleStoreDialog() {
      this.selectData();
    },
    cancelForm() {
      this.$refs.filterForm.resetFields();
      this.selectData();
    },
    selectData() {
      this.sizeChange();
    },
    getList() {
      if (this.activeName === "first") {
        this.filterForm.finishedState = "0";
        this.$refs.SampleStoreCommission.getList();
      } else {
        this.filterForm.finishedState = "1";
        this.$refs.SampleStoreFinished.getList();
      }
    },
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
    // 样品留存
    addSampleStore() {
      if (this.activeName !== "first") {
        this.$message({
          message: "请选择未办数据",
          type: "warning",
        });
        return false;
      }
      this.rowData = this.$refs.SampleStoreCommission.tableDatas;
      if (this.rowData === null || this.rowData.length === 0) {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
        return false;
      }
      this.dialogFormVisible = true;
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    // 导出
    exportData() {
      if (this.activeName !== "second") {
        this.$message({
          message: "请选择已办数据",
          type: "warning",
        });
        return false;
      }
      if (
        this.$refs.SampleStoreFinished.tableDatas === null ||
        this.$refs.SampleStoreFinished.tableDatas.length === 0
      ) {
        this.$message.error("请选择数据");
        return false;
      }
      var tableData = this.$refs.SampleStoreFinished.tableDatas;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "样品编号",
          "样品名称",
          "产品型号",
          "检测项目",
          "入库数量",
          "入库日期",
          "入库人",
          "保存日期",
        ];
        const filterVal = [
          "sampleNum",
          "sampleName",
          "sampleModel",
          "detectionItemName",
          "sampleStoreCount",
          "sampleStoreDate",
          "sampleStorePerson",
          "saveDate",
        ];
        const data = this.formatJson(filterVal, tableData);
        excel.export_json_to_excel({
          header: tHeader, // 表头
          data, // 数据
          filename: "样品留存信息", // 导出文件名
          autoWidth: true, // 导出宽度自动
          bookType: "xlsx", // 导出后缀
        });
      });
    },
    // 选择页签
    handleClick() {
      this.pageInfo = {
        pageIndex: 1,
        pageSize: 10,
      };
      if (this.activeName === "first") {
        this.filterForm.finishedState = "0";
      } else {
        this.filterForm.finishedState = "1";
      }
    },
  },
};
</script>
